<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="./commons/common-css.html :: commonHead('ac首页')">
	<meta charset="UTF-8">
</head>
<body>
<div style="height: 100%; width: 100%; overflow: hidden;" id="dataDiv">
	<div style="width: 28%; height: 100%; padding-top: 10px; padding-left: 3px; padding-right: 3px; float: left;">
		<ul id="treeUl" class="ztree"></ul>
	</div>
	<div style="width: 71.5%; height: 100%; float: left; border-left: solid 1px;">
		<div style="width: 100%; height: 10%; padding-top: 8px; padding-left: 3px; border-bottom: solid 2px #03B8CF;">
			<button type="button" class="btn btn-info" v-for="data in btnList" style="width: 120px; margin-left: 5px;" @click="openNewUrl(data.url)">{{data.name}}</button>
		</div>
		<iframe 
			width="100%"
			height="90%"
			frameborder=0
			v-bind:src="iframeUrl"
		></iframe>
	</div>
</div>
<!-- js引入 -->
<span th:include="./commons/common-js.html :: commonOnLoadJs"></span>
</body>
<script type="text/javascript">
/*<![CDATA[*/
ctxPath = [[@{/}]];
/*]]>*/
const URLS = {
	APIS: {
		ZTREE: ctxPath+'v1/restful/administrationUnit/getAdministrationUnitZtree'
	},
	PAGES: {
		GET_ADMINISTRATION: ctxPath+'router/administration/administrationDetail',
		
		ADD_ADMINISTRATION: ctxPath+'router/administration/administrationAdd'
	}
};
let zTreeObj = null;
var app = new Vue({
	el: '#dataDiv',
	data: {
		id: '',
		name: '',
		parentId: '',
		rootNodeId: '',
		type: '',
		currentIndex: 0,
		iframeUrl: ctxPath+'router/administration/defaultPage'
	},
	methods: {
		init: function() {
			let _this = this;
			axios.get(URLS.APIS.ZTREE)
			.then(function (res) {
				data = res.data;
				if (data.code == 200) {
					_this.iframeUrl = ctxPath+'router/administration/defaultPage';
					_this.type = '';
					data = data.data;
					for (var i = 0, len = data.length; i < len; i++) {
						let type = data[i].type;
						data[i].isParent = true;
						data[i].icon = ctxPath + 'static/images/ztree/resource.png';
						switch (type) {
							case 'ORGANIZATION':
								data[i].icon = ctxPath + 'static/images/ztree/org.png';
								break;
							case 'DEPARTMENT':
								data[i].icon = ctxPath + 'static/images/ztree/dept.png';
								break;
							case 'ROLE':
								data[i].icon = ctxPath + 'static/images/ztree/role.png';
								break;
						}
					}
					let zNodes = data;
					zTreeObj = $.fn.zTree.init($("#treeUl"), setting, zNodes);
					let nodes = zTreeObj.getNodes();
					if (nodes != null && nodes.length != 0) {
						zTreeObj.setChkDisabled(nodes[0], true);
						zTreeObj.expandNode(nodes[0], true, null, null, true);
					}
				}
			});
		},
		openUrl: function(url, index) {
			app.currentIndex = index;
			app.iframeUrl = url;
		},
		openNewUrl: function(url) {
			if (url == null || typeof url == 'undefined') {
				return;
			}
			layer.open({
				type: 2,
				title: '操作',
				shadeClose: false,
				area: ['90%', '90%'],
				shade: 0.2,
				content: url,
				end: function() {
					app.init();
				}
			});
		}
	},
	mounted: function() {
		this.init();
	},
	computed: {
		btnList: function() {
			let _this = this;
			let type = this.type;
			let id = this.id;
			let defaultBtnArr = [{
				name: '添加行政区划',
				url: URLS.PAGES.ADD_ADMINISTRATION
			}];
			if (id == '') {
				return defaultBtnArr;
			}
			defaultBtnArr = [{
				name: '修改',
				url: URLS.PAGES.ADD_ADMINISTRATION+'?id='+_this.id+'&parentId='+_this.parentId
			},{
				name: '添加子行政区划',
				url: URLS.PAGES.ADD_ADMINISTRATION+'?parentId='+_this.id
			}];
			return defaultBtnArr;
		}
	}
});
var setting = {
	data: {
		simpleData: {
			enable: true,
			idKey: "id",
			pIdKey: "pid",
			rootPId: 0
		}
	},
	view: {
		showIcon: true
	},
	callback: {
		onClick: function(e, treeId, treeNode, clickFlag) {
			zTreeObj.checkNode(treeNode, !treeNode.checked, true);
			app.id = treeNode.id;
			app.name = treeNode.name;
			app.parentId = treeNode.pid;
			let type = treeNode.type;
			let rootNodeId = getRoot(treeNode).id;
			app.rootNodeId = rootNodeId;
			app.type = type;
			app.iframeUrl = URLS.PAGES.GET_ADMINISTRATION + '?id=' + treeNode.id;
		}
	}
};

function getRoot(treeNode){ 
	if (treeNode.getParentNode() != null){
		var parentNode = treeNode.getParentNode();
		return getRoot(parentNode);
	} else {
		return treeNode;
	} 
}
</script>
</html>